<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  li{list-style: none;}
  .fl{float: left;}
  #box{width: 294px;height: 224px;padding: 7px;background: #fff;margin: 200px auto;border: none;}
  div{width: 290px;height: 220px;border: 1px solid #FF6300;padding: 2px;}
  ul{margin-top: 4px;}
  li{border: 1px solid #FFADAD;font-size: 13px;width: 45px;height: 26px;margin-bottom: 3px;line-height: 26px;text-align: center;cursor: pointer;}
  img{width: 184px;height: 216px;margin: 4px 6px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Ul1 = document.getElementsByTagName('ul')[0];
      var Li1 = Ul1.getElementsByTagName('li');
      var Ul2 = document.getElementsByTagName('ul')[1];
      var Li2 = Ul2.getElementsByTagName('li');
      var Img = document.getElementsByTagName('img')[0];
      var pic1 = ['images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg'];
      var pic2 = ['images/17.jpg','images/18.jpg','images/19.jpg','images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg'];
      var num = 0;
      var num1 = Li2.length;
      var timer = null;
      function inital1(n){
        for (var i = 0; i < Li1.length; i++) {
          Li1[i].style.color = '#000';
          Li1[i].style.background = '';
        };
        for (var i = 0; i < Li2.length; i++) {
          Li2[i].style.color = '#000';
          Li2[i].style.background = '';
        };
        Img.src = pic1[n];
        Li1[n].style.background = '#FF637B';
        Li1[n].style.color = '#fff';
      }
      inital1(num);
      function inital2(n){
        for (var i = 0; i < Li1.length; i++) {
          Li1[i].style.color = '#000';
          Li1[i].style.background = '';
        };
        for (var i = 0; i < Li2.length; i++) {
          Li2[i].style.color = '#000';
          Li2[i].style.background = '';
        };
        Img.src = pic1[n];
        Li2[n].style.background = '#FF637B';
        Li2[n].style.color = '#fff';
      }
      function one(){
        timer = setInterval(function(){
            if(num >= -1 && num < Li1.length-1){
              num++;
              inital1(num);
              num1 = Li2.length;
            }else{
              num1--;
              inital2(num1);
              if(num1 == 0){
                num = -1;
              }
            }
        },500)
      }
      one();
      for (var i = 0; i < Li1.length; i++){
        Li1[i].index = i;
        Li1[i].onmouseover = function(){
          clearInterval(timer);
          num = this.index;
          inital1(num);
          num1 = Li2.length;
        }
        Li1[i].onmouseout = one;
      }
      for (var i = 0; i < Li2.length; i++){
        Li2[i].index = i;
        Li2[i].onmouseover = function(){
          clearInterval(timer);
          num1 = this.index;
          inital2(num1);
          num = 0;
        }
        Li2[i].onmouseout = one;
      }
      Img.onmouseover = function(){
        clearInterval(timer);
      }
      Img.onmouseout = one;
    }
  </script>
</head>
<body>
  <div id="box">
    <div>
      <ul class="fl">
        <li>连衣裙</li>
        <li>雪纺</li>
        <li>T恤</li>
        <li>铅笔裤</li>
        <li>婚纱</li>
        <li>外套</li>
        <li>连体裤</li>
      </ul>
      <img class="fl" src="">
      <ul class="fl">
        <li>包包</li>
        <li>凉鞋</li>
        <li>单鞋</li>
        <li>太阳镜</li>
        <li>丝袜</li>
        <li>帆布鞋</li>
        <li>情侣装</li>
      </ul>
    </div>
  </div>
</body>
</html>